<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>动态课程卡片</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
            background: #f5f5f5;
            padding: 40px 0
        }

        /* 大盒子：flex 居中 */
        .course-wall {
            display: flex;
            /* 弹性布局 */
            justify-content: center;
            /* 主轴居中 */
            align-items: center;
            /* 交叉轴居中 */
            flex-wrap: wrap;
            /* 允许换行 */
            gap: 20px;
            /* 卡片间距 */
            max-width: 1200px;
            margin: 0 auto;
            /* 自身再居中 */
            padding: 0 20px;
        }

        /* 单张卡片 */
        .card {
            width: 260px;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
            transition: transform .25s;
        }

        .card:hover {
            transform: translateY(-4px)
        }

        .card img {
            width: 100%;
            height: 146px;
            object-fit: cover
        }

        .card-body {
            padding: 14px 16px 18px
        }

        .card-title {
            font-size: 15px;
            color: #333;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical
        }

        .card-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            font-size: 13px;
            color: #999
        }

        .level {
            color: #ff6b6b
        }
    </style>
</head>

<body>

    <!-- 空的容器，由 JS 填充 -->
    <div class="course-wall" id="wall"></div>

    <script>
        /* 1. 原始数据（从图片 OCR 提取，这里只列 9 条） */
        const list = [
            { title: "Angular2 劲爆来袭", level: "高级", count: 389 },
            { title: "ThinkPHP5.0 博客系统实战", level: "高级", count: 124 },
            { title: "Android 网络图片加载框架详解", level: "高级", count: 1125 },
            { title: "Android Hybrid App 开发实战", level: "高级", count: 357 },
            { title: "打造你的今日头条", level: "高级", count: 2250 },
            { title: "UGUI 源码深度剖析", level: "高级", count: 432 },
            { title: "Kami2 首页界面切换效果实战", level: "高级", count: 888 },
            { title: "UNITY 从入门到精通实战案例", level: "高级", count: 590 },
            { title: "Cocos 深度学习你不会错过的实战", level: "高级", count: 1125 }
        ];

        /* 2. 动态生成 DOM */
        const wall = document.getElementById('wall');
        list.forEach(item => {
            const card = document.createElement('div');
            card.className = 'card';
            card.innerHTML = `
    < img src="https://picsum.photos/260/146?random=${Math.random()}" alt="封面">
    <div class="card-body">
      <div class="card-title">${item.title}</div>
      <div class="card-info">
        <span class="level">${item.level} · ${item.count}人在学习</span>
      </div>
    </div>`;
            wall.appendChild(card);
        });
    </script>
</body>

</html>